<template>
          <section class="content">
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" >
				<el-form-item>
				 <span>结构物:</span><el-select v-model="value" class="select-w-130" clearable placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <span>监测内容:</span><el-select class="select-w-130" v-model="value1" clearable placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value1" :label="item.label1" :value="item.value1">
                        </el-option>
                    </el-select>
                       <span>参数:</span><el-select  class="select-w-130" v-model="value4" clearable placeholder="请选择">
                            <el-option v-for="item in options4" :key="item.value4" :label="item.label4" :value="item.value4">
                            </el-option>
                    </el-select>
                    <span>时间1:</span> <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" >
                </el-date-picker>

                    <span>时间2:</span> <el-date-picker v-model="value3" type="daterange" align="right" unlink-panels range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" >
                </el-date-picker>
                  
					<el-button type="primary" >查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

<el-col :span="14" class="bc-w">
                <div class="chartLine" id="chartLine"></div>
            </el-col>
    </section>
</template>
<script >
import echarts from "echarts";
export default {
    data(){
        return{
             chartLine: null,
              options:[
               {value:'',label:''}
             ],
              options1:[
              {value1:'',label1:''}
             ],
              options4:[
              {value4:'',label4:''}
             ],
             value:'',
             value1:'',
             value2:'',
             value3:'',
             value4:'',
        }
    },
     methods: {
    drawLineChart() {
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      this.chartLine.setOption({
        title: {
          text: "时间对比",
           subtext: '监测内容:'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          data: ["时间端01","时间端02"]
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false }, //数据视图
            magicType: { type: ["line", "bar"] },//line 折线图类型  bar 柱状图
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,


            data: ["0", "14", "28", "42", "56", "70", "98"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "时间端01",
            type: "line",
            data: [120, 132, 101, 134, 90, 230, 210]
          },
           {
            name: "时间端02",
            type: "line",
            data: [121, 131, 100, 135, 99, 239, 219]
          }
        ]
      });
    },
      drawCharts() {
      this.drawLineChart();
    }
  },
  mounted: function() {
      this.drawCharts()
  }
};
</script>


<style scoped>
.content {
  padding-top: 20px;
  background-color: #ffffff;
  min-height: 680px;
}
.bc-w{
    width: 100%;
    margin-top:40px;
}
.chartLine{
    margin-left: 80px;
    width:1000px;
    height: 400px;
}
.select-w-130{
  width: 130px;
}
</style>
